<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服装定制系统管理后台</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css">
    <link rel="stylesheet" href="css/admin.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body>
    <div id="app">
        <el-container class="admin-container">
            <el-aside width="220px">
                <div class="logo">
                    <img src="img/logo.png" alt="Logo">
                    <h2>服装定制管理后台</h2>
                </div>
                <el-menu
                    :default-active="activeMenu"
                    class="el-menu-vertical"
                    background-color="#304156"
                    text-color="#fff"
                    active-text-color="#409EFF"
                    router>
                    <el-menu-item index="/dashboard">
                        <el-icon><el-icon-data-line /></el-icon>
                        <span>仪表盘</span>
                    </el-menu-item>
                    
                    <el-sub-menu index="/order">
                        <template #title>
                            <el-icon><el-icon-shopping-cart /></el-icon>
                            <span>订单管理</span>
                        </template>
                        <el-menu-item index="/order/list">订单列表</el-menu-item>
                        <el-menu-item index="/order/process">订单流程跟踪</el-menu-item>
                        <el-menu-item index="/order/analysis">订单数据分析</el-menu-item>
                        <el-menu-item index="/order/dispute">纠纷处理</el-menu-item>
                    </el-sub-menu>
                    
                    <el-menu-item index="/user">
                        <el-icon><el-icon-user /></el-icon>
                        <span>用户管理</span>
                    </el-menu-item>
                    
                    <el-menu-item index="/designer">
                        <el-icon><el-icon-brush /></el-icon>
                        <span>设计师管理</span>
                    </el-menu-item>
                    
                    <el-menu-item index="/product">
                        <el-icon><el-icon-goods /></el-icon>
                        <span>产品管理</span>
                    </el-menu-item>
                    
                    <el-menu-item index="/system">
                        <el-icon><el-icon-setting /></el-icon>
                        <span>系统设置</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            
            <el-container>
                <el-header>
                    <div class="header-left">
                        <el-icon @click="toggleSidebar" class="toggle-btn">
                            <el-icon-fold v-if="!isSidebarCollapsed"></el-icon-fold>
                            <el-icon-expand v-else></el-icon-expand>
                        </el-icon>
                        <el-breadcrumb>
                            <el-breadcrumb-item>{{ pageTitle }}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div class="header-right">
                        <el-dropdown trigger="click">
                            <div class="user-info">
                                <img :src="adminInfo.avatar || 'img/default-avatar.png'" class="avatar">
                                <span>{{ adminInfo.username }}</span>
                            </div>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="toProfile">个人中心</el-dropdown-item>
                                    <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </el-header>
                
                <el-main>
                    <router-view v-if="isRouterAlive"></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
    
    <script type="module">
        const { createApp, ref, provide, inject, nextTick } = Vue;
        
        const app = createApp({
            setup() {
                const activeMenu = ref('/dashboard');
                const isSidebarCollapsed = ref(false);
                const isRouterAlive = ref(true);
                const pageTitle = ref('仪表盘');
                
                const adminInfo = ref({
                    username: '管理员',
                    avatar: ''
                });
                
                const toggleSidebar = () => {
                    isSidebarCollapsed.value = !isSidebarCollapsed.value;
                };
                
                const toProfile = () => {
                    // 跳转到个人中心
                };
                
                const logout = () => {
                    // 退出登录逻辑
                };
                
                provide('reload', () => {
                    isRouterAlive.value = false;
                    nextTick(() => {
                        isRouterAlive.value = true;
                    });
                });
                
                return {
                    activeMenu,
                    isSidebarCollapsed,
                    isRouterAlive,
                    pageTitle,
                    adminInfo,
                    toggleSidebar,
                    toProfile,
                    logout
                };
            }
        });
        
        // 路由配置
        const routes = [
            { path: '/dashboard', component: () => import('./js/views/Dashboard.js') },
            { path: '/order/list', component: () => import('./js/views/order/OrderList.js') },
            { path: '/order/process', component: () => import('./js/views/order/OrderProcess.js') },
            { path: '/order/analysis', component: () => import('./js/views/order/OrderAnalysis.js') },
            { path: '/order/dispute', component: () => import('./js/views/order/DisputeList.js') },
            { path: '/order/dispute/:id', component: () => import('./js/views/order/DisputeDetail.js') },
            { path: '/order/:id', component: () => import('./js/views/order/OrderDetail.js') }
        ];
        
        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes
        });
        
        router.beforeEach((to, from, next) => {
            // 路由守卫逻辑
            next();
        });
        
        app.use(ElementPlus);
        app.use(router);
        app.mount('#app');
    </script>
</body>
</html> 